<template>
  <el-menu :collapse="true" :router="true">
    <el-menu-item index="/screen">
      <svg-icon icon-name="icon-jiankongdaping" :size="iconSize"></svg-icon>
      <template #title>实时监控</template>
    </el-menu-item>
    <el-menu-item v-if="hasRole('admin')" index="/userManage">
      <svg-icon icon-name="icon-yonghuguanli" :size="iconSize"></svg-icon>
      <template #title>用户管理</template>
    </el-menu-item>
    <el-menu-item index="/pipelineManage">
      <svg-icon icon-name="icon-dixiaguanxianguanli" :size="iconSize"></svg-icon>
      <template #title>管线管理</template>
    </el-menu-item>
    <el-menu-item index="/stationManage">
      <svg-icon icon-name="icon-youtian" :size="iconSize"></svg-icon>
      <template #title>井队-站场管理</template>
    </el-menu-item>
    <el-menu-item index="/recordManage">
      <svg-icon icon-name="icon-lishishuju" :size="iconSize"></svg-icon>
      <template #title>历史数据</template>
    </el-menu-item>
    <el-menu-item index="/riskRecordManage">
      <svg-icon icon-name="icon-fengxianjilu" :size="iconSize"></svg-icon>
      <template #title>风险记录</template>
    </el-menu-item>
    <el-menu-item index="/statistic">
      <svg-icon icon-name="icon-baobiaotongji" :size="iconSize"></svg-icon>
      <template #title>报表统计</template>
    </el-menu-item>
    <el-menu-item v-if="hasRole('admin')" index="/config">
      <svg-icon icon-name="icon-shezhi" :size="iconSize"></svg-icon>
      <template #title>设置</template>
    </el-menu-item>
  </el-menu>
</template>
<script setup name="Sidebar">
import { ref } from 'vue'
import { hasRole } from '../utils/authUtils'
const iconSize = ref(18)
</script>
<style lang="less" scoped>
.el-menu--collapse {
  width: 100%;
  height: 100%;
  background: #f9f9f9;
}
</style>
